<template>
  <el-dialog :visible.sync="isShow" :before-close="handleCancelModal" :close-on-click-modal="false" width="500px">
    <span slot="title" v-text="formParams['user_id'] ? '编辑用户' : '创建用户'" />
    <!-- 数据表单 -->
    <el-form ref="formParams" :model="formParams" label-width="140px" size="small" style="padding-right: 40px">
      <el-form-item prop="phone" label="手机号：">
        <el-input v-model="formParams.phone" placeholder="请输入可用的手机号码" />
      </el-form-item>
      <el-form-item prop="secret" label="登陆密码：">
        <el-input v-model="formParams.secret" placeholder="请输入6-18位的登录密码" autocomplete="off" onfocus="this.type='password'" />
      </el-form-item>
      <el-form-item prop="group_id" label="所属分组：">
        <el-select v-model="formParams.group_id" placeholder="请选择用户所属权限分组" clearable>
          <el-option v-for="item in option['groupList']" :key="item.group_id" :label="item.group_name" :value="item.group_id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="number" label="会员号：">
        <el-input v-model="formParams.number" placeholder="输入会员号" />
      </el-form-item>
      <el-form-item prop="name" label="用户姓名：">
        <el-input v-model="formParams.name" placeholder="用于终端展示的名字" />
      </el-form-item>
      <el-form-item prop="remarks" label="备注：">
        <el-input v-model="formParams.remarks" placeholder="请输入用户备注" />
      </el-form-item>
      <el-form-item prop="bond" label="保证金：">
        <el-input v-model="formParams.bond" placeholder="请输入保证金" />
      </el-form-item>
      <el-form-item prop="can_bid" label="是否可参与投标：">
        <el-radio-group v-model="formParams.can_bid" size="mini">
          <el-radio-button :label="0"><span style="padding: 0 5px">不可</span></el-radio-button>
          <el-radio-button :label="1"><span style="padding: 0 5px">可以</span></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="is_admin" label="是否能发布商品：">
        <el-radio-group v-model="formParams.is_admin" size="mini">
          <el-radio-button :label="0"><span style="padding: 0 5px">否</span></el-radio-button>
          <el-radio-button :label="1"><span style="padding: 0 5px">是</span></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="status" label="用户状态：">
        <el-radio-group v-model="formParams.status" size="mini">
          <el-radio-button :label="0"><span style="padding: 0 5px">停用</span></el-radio-button>
          <el-radio-button :label="1"><span style="padding: 0 5px">正常</span></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!-- 提交按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :disabled="isSubmit" @click="handleCancelModal">取 消</el-button>
      <el-button type="primary" size="small" :loading="isSubmit" @click="handleSubmitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { save } from '@/api/user'
import { extract } from '@/utils/tools'

export default {
  props: {
    'isShow': { type: Boolean, default: true },
    'isUpdate': { type: Boolean, default: false },
    'itemData': { type: Object, default: null },
    'option': { type: Object, default: null }
  },
  data: function() {
    return {
      isSubmit: false,
      formParams: {
        phone: null,
        secret: null,
        group_id: null,
        name: null,
        number: null,
        remarks: null,
        bond: null,
        can_bid: 0,
        is_admin: 0,
        status: 1,
        user_id: null
      }
    }
  },
  mounted: function() {
    if (this.itemData) {
      this.itemData.group_id = this.itemData.group ? this.itemData.group.group_id : null
      this.itemData.bond = this.itemData.extra ? this.itemData.extra.bond : null
      this.itemData.can_bid = this.itemData.extra ? this.itemData.extra.can_bid : null
      this.formParams = extract(this.formParams, this.itemData)
    }
  },
  methods: {
    handleSubmitForm() {
      console.log(this.formParams)
      this.isSubmit = true
      save(this.formParams, this.formParams['user_id'] || null).then(function() {
        this.$emit('on-cancel-modal', 'showModal', true)
      }.bind(this)).catch(function() {
        this.isSubmit = false
      }.bind(this))
    },
    // 取消弹出框
    handleCancelModal(refresh = false) {
      if (!this.isSubmit) {
        this.$emit('on-cancel-modal', 'showModal', refresh)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.partition-container {
  display: flex;
  .partition-left {
    flex-grow: 1;
    margin-right: 15px;
  }
  .partition-right {
    width: 200px;
    height: 262px;
    border: 1px solid #DCDFE6;
    .title {
      height: 31px;
      font-size: 14px;
      font-weight: 700;
      line-height: 31px;
      padding-left: 8px;
      background-color: #f2f2f2;
    }
    .rule-main {
      height: 227px;
      margin-top: 1px;
      overflow-y: scroll;
      .el-tree {
        margin-top: 5px;
      }
    }
  }
}
</style>
